<template>
  <div>
    <!-- 一条文章单元格 -->
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{ theAtrical.title }}</span>
          <img
            v-if="theAtrical.cover.type === 1"
            class="thumb"
            v-lazy="theAtrical.cover.images[0]"
          />
        </div>
        <div class="thumb-box" v-if="theAtrical.cover.type > 1">
          <img
            class="thumb"
            :key="index"
            v-lazy="item"
            v-for="(item, index) in theAtrical.cover.images"
          />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <div>
            <span
              >作者:{{
                theAtrical.aut_name === '黑马程序员(改不了)' || theAtrical.aut_name === '黑马先锋'
                  ? 'Hero'
                  : theAtrical.aut_name
              }}</span
            >
            <span>{{ theAtrical.comm_count }}评论</span>
            <span>发布时间:{{ formatDate(theAtrical.pubdate) }}</span>
          </div>
          <!-- 反馈按钮(阻止事件冒泡) -->
          <van-icon name="cross" @click.stop="show = true" v-if="showCross" />
        </div>
      </template>
    </van-cell>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      getContainer="body"
      :cancel-text="bottomText"
      @select="onSelect"
      @cancel="oncancel"
      @close="onclose"
    />
    <van-popup
      v-model="isPopupShow"
      position="bottom"
      :style="{ height: '30%' }"
      closeable
      get-container="body"
    >
      <van-field
        v-focus
        v-model.trim="message"
        rows="4"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入举报内容"
        show-word-limit
      >
      </van-field>
      <van-button class="submit" round type="info" @click="submitReport">提交</van-button>
    </van-popup>
  </div>
</template>

<script>
import { timeAgo } from '@/utils/day.js'
import { firstAction, secondAction } from '@/api/actions.js'
import { disArtAPI, reportArtAPI } from '@/api/index.js'
import { Notify } from 'vant'
export default {
  data() {
    return {
      show: false,
      actions: firstAction,
      bottomText: '取消',
      artValue: '',
      isPopupShow: false,
      message: ''
    }
  },
  props: {
    theAtrical: {
      type: Object
    },
    artID: {
      type: String
    },
    showCross: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    formatDate: timeAgo, // 函数体是timeAgo
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.name === '反馈垃圾内容') {
        this.actions = secondAction
        this.bottomText = '返回'
      } else if (item.name === '不感兴趣') {
        console.log(this.artID)
        this.disArt()
        this.show = false
      } else {
        console.log(item)
        this.artValue = item.value
        console.log(this.artValue)
        if (this.artValue !== 0) {
          this.reportArt()
        } else if (this.artValue === 0) {
          this.isPopupShow = true
        }
      }
    },
    // 点击弹出框底部按钮（取消或者返回）
    oncancel() {
      if (this.bottomText === '取消') {
        this.show = false
      } else if (this.bottomText === '返回') {
        this.show = true
        this.actions = firstAction
        this.bottomText = '取消'
      }
    },
    // 关闭面板时触发
    onclose() {
      this.actions = firstAction
      this.bottomText = '取消'
    },
    // 不感兴趣功能
    async disArt() {
      const { data } = await disArtAPI(this.artID)
      console.log(data)
      if (data.message === 'OK') {
        Notify({ type: 'success', message: '反馈成功', duration: 1000 })
      } else {
        Notify({ type: 'danger', message: '反馈失败', duration: 1000 })
      }
    },
    // 举报文章
    async reportArt() {
      const { data } = await reportArtAPI(this.artID, this.artValue)
      console.log(data)
      this.show = false
      if (data.message === 'OK') {
        Notify({ type: 'success', message: '举报成功', duration: 1000 })
      } else {
        Notify({ type: 'danger', message: '举报失败', duration: 1000 })
      }
    },
    // 举报文章——其他内容举报
    async submitReport() {
      console.log('点击了举报按钮')
      console.log(this.message)
      if (this.message.length !== 0) {
        const { data } = await reportArtAPI(this.artID, this.artValue, this.message)
        console.log(data)
        if (data.message === 'OK') {
          Notify({ type: 'success', message: '举报成功', duration: 1000 })
        } else {
          Notify({ type: 'danger', message: '举报失败', duration: 1000 })
        }
        this.show = false
        this.isPopupShow = false
        // 清空输入框内容
        this.message = ''
      } else {
        Notify({ type: 'warning', message: '请输入举报内容', duration: 1000 })
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 标题样式 */
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* label描述样式 */
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文章信息span */
.label-box span {
  margin: 0 3px;
  &:first-child {
    margin-left: 0;
  }
}
/* 一张图片 */
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
// 举报文章其他内容提交按钮
.submit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>
